<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<style type="text/css">
		.wrapper{
			width: 400px;
			min-height: 600px;
			border: 1px solid #ccc;
			margin: 100px auto;
		}
		.header{
			height: 45px;
			line-height: 45px;
			background-color: #BEB6E6;
			text-align: center;
			color: #fff;
		}
		.header h3{
			margin: 0;
			padding-right: 20px;

		}
		.item button{
			background-color: #BEB6E6;
			border-radius: 5px;
			color: #fff;
			height: 35px;
			margin-top: 15px;
			border: none;
			margin-left: 15px;
		}
		.sldiv{
			margin:50px 20px;
		}
	</style>
</head>
<body>


	<div class="wrapper">

		<div class="header">
			<h3><span class="iconfont icon-fanhui-copy" style="float: left;margin-left: 20px;font-size: 30px;margin-top:-5px"></span>请选择省份</h3>
		</div>

		<div area-wrapper>
			<div class="province item">
				<button>广西壮族自治区</button>
		        <button>广东</button>
		        <button>河南</button>
		        <button>湖南</button>

				
			</div>
			<div class="city item" style="display: none;">
				<button>柳州</button>
				<button>南宁</button>
				<button>河池</button>
				<button>佛山</button>
				<button>惠州</button>
				<button>郑州</button>
				<button>洛阳</button
				
			</div>
			<div class="area item" style="display: none;">
				<button>柳江区</button>
				<button>城中区</button>
				<button>鱼峰区</button>

				<button>西乡塘区</button>
				<button>良庆区区</button>
				<button>武鸣区</button>
				<button>江南区</button>
				<button>洛阳</button>

				<button>宜州区</button>
				<button>金城江区</button>
				<button>南丹区</button>
				<button>东兰区</button>



				<button>顺德区</button>
				<button>南海区</button>

				<button>惠阳区</button>
				<button>惠东区</button>

				<button>惠东区</button>
				<button>二七区</button>

				<button>老城区</button>
				<button>西工区</button>
			</div>
		</div>


		<div class="sldiv">
		<select id="slprovince">
			<option>广西</option>		
		</select>省

		<select id="slcity">
			<option>柳州</option>
		</select>市

		<select id="slarea">
			<option >城中</option>
		</select>区
	</div>


	</div>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">

		/*初始化省份div框
		1.先把省份div框中静态数据移出掉*/

		function InitProvince(){
			$('.province').empty();
			$.get('data/province.json',function(res){
				for(var i=0;i<res.length;i++){
					/*用字符串拼接一个button按钮*/
					var btn='';
					btn='<button value="'+res[i].id+'">'+res[i].name+'</button>'
					$('.province').append(btn);
				}
			});
		}
		InitProvince();
		


	</script>

</body>
</html>